<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="easyui/jquery-easyui-1.4.3/themes/gray/easyui.css">
	<link rel="stylesheet" href="easyui/jquery-easyui-1.4.3/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
    		url:'http://localhost:8080/bank/user/userAction!list.action', 
    		singleSelect : true,
    		rownumbers : true,
    		idField : 'userId',
    		fitColumns : true,
    		 pagination : true,
    		pagePosition : 'bottom',
		    columns:[[    
        		{field:'username',title:'用户名',width:'100'},    
        		{field:'address',title:'地址',width:'100'},    
        		{field:'tel',title:'电话',width:'100'}    
    		]],
    		toolbar : '#toolbar'
		});  
	});
	function add(){
		$('#bill').form('clear');
		$('#editData').hide();
		$('#addData').show();
		$('#cbDialog').dialog('open').dialog('center').dialog('setTitle', '新增用户');
	}
	function edit(){
		var row = $('#dg').datagrid('getSelected');
		if (row == null) {
			return;
		}
		$('#bill').form('clear');
		$('#addData').hide();
		$('#editData').show();
		$('#cbDialog').dialog('open').dialog('center').dialog('setTitle', '编辑');
		$('#bill').form('load', row);
	}
	function del() {
		var row = $("#dg").datagrid('getSelected');
		if (row == null) {
			
			return;
		}
		$.messager.confirm('提示', '确认删除?', function(conf) {
			if (conf) {
				jQuery.ajax({
					url : 'http://localhost:8080/bank/user/userAction!delete.action',
					data : row,
					type : 'post',
					dataType : 'json',
					success : function(result) {
						if (result.success) {
							$("#dg").datagrid("reload");
							$('#dg').datagrid('clearSelections');
						} else {
						}
					}
				});
			}
		});
	}
	function onSave(cls) {
		var url = '';
		if(cls){
			url = 'http://localhost:8080/bank/user/userAction!update.action';
		}else{
			url = 'http://localhost:8080/bank/user/userAction!save.action';
		}
		var flag = true;
		if (flag) {
			$('#bill').form('submit', {
				url : url,
				onSubmit : function() {
					return $('#bill').form('validate');
				},
				success : function(result) {
					var result = eval('(' + result + ')');
					console.log(result);
					if (result.success) {
						$('#cbDialog').dialog('close');
						$('#dg').datagrid('reload');
					} else {
					}
				}
			});
		}
	}
</script> 
</head>
<body>
	<table id="dg"></table>
	
	<div id="toolbar">
		<a class="easyui-linkbutton" plain="true" href="javascript:void(0);" onClick="add();">增加</a>  
		<a class="easyui-linkbutton" plain="true" href="javascript:void(0);" onClick="edit();">修改</a>  
		<a class="easyui-linkbutton" plain="true" href="javascript:void(0);" onClick="del();">删除</a>  
	</div>
	
	<div id="cbDialog" class="easyui-dialog" style="width:500px;height:350px;padding:10px 10px;"
		data-options="closed:true,buttons:'#dlg-buttons'" modal=true>
		<form id="bill" method="post" overflow=auto>
			<table>
				<tr>
					<th>用户名</th>
					<td><input id="username" name="username"
						class="easyui-textbox" style="width:220px;height:25px;"
						data-options="required:true" /></td>
				</tr>
			</table>
			<input type="text" name="userId" style="display:none;"> 
		</form>
	</div>
	<div id="dlg-buttons">
		<a id="addData" href="javascript:void(0)" class="easyui-linkbutton c6" onclick="onSave(false)">保存</a> 
		<a id="editData" href="javascript:void(0)" class="easyui-linkbutton c6" onclick="onSave(true)">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消</a>
	</div>
</body>
</html>